<template>
    <div class="register">

        <div>
            <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="title">
            <img class="logo" src="../assets/logo.jpg" alt="">
        </div>
        <div>
            <van-form @submit="onSubmit" label-align="right">
                <van-cell-group inset>
                    <van-field v-model="state.username" name="username" placeholder="请输入用户名" label="用户名："
                        :rules="[{ required: true, message: '用户名不能为空！' }]" />
                    <van-field v-model="state.userpass" name="userpass" placeholder="请输入密码" type="password" label="密码："
                        :rules="[{ required: true, message: '密码不能为空！' }]" />
                    <van-field v-model="state.userpass2" name="userpass2" placeholder="请确认密码" type="password"
                        label="确认密码：" :rules="[{ validator: validatorMessage }]" />
                    <van-field v-model="state.mobilenum" name="mobilenum" placeholder="请输入电话" label="电话号码："
                        :rules="[{ pattern, message: '请输入正确号码！' }]" />
                    <van-field v-model="state.address" name="address" placeholder="请输入地址" label="用户地址："
                        :rules="[{ required: true, message: '地址不能为空！' }]" />
                    <van-field v-model="state.comment" name="comment" placeholder="请输入备注" label="备注："
                        :rules="[{ required: true, message: '备注不能为空！' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue';
import { RegisterApi } from '@/api';
import { useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter();
const state = ref({
    username: '',
    userpass: '',
    userpass2: '',
    mobilenum: '',
    address: '',
    comment: ''
});
const validatorMessage = value => {
    if (value === '') {
        return '确认密码不能为空！';
    }
    if (value !== state.value.userpass) {
        return '两次密码要相同！';
    }
    return;
};
// 正则表达式
const pattern = /^1[3-9]\d{9}$/;
const RegisterUser = async e => {
    const res = await RegisterApi(e);
    if (res.success === '0') {
        showFailToast('注册失败！');
    }
    if (res.success === '1') {
        showSuccessToast('注册成功！');
        router.push('/login');
    }
};

const onSubmit = e => {
    RegisterUser(e);
    console.log(e);
};
const onClickLeft = () => {

    router.back()
};
</script>

<style scoped>
/* 组件二次开发样式时候，使用样式穿透：:deep() */
:deep(.van-field__error-message) {
    color: #de08c9 !important;
}

.register {
    width: 100%;
}

.title {
    width: 80%;
    font-size: 32px;
    margin: 10px auto;
    text-align: center;
}
.logo {
    width: 100%;
    
}
.van-field {
  border: 1px solid #eee;
  margin: 5px 0;
  border-radius: 20px;
}
</style>